<?php
/**
 * WooCommerce Orders Template
 * 订单历史页面模板，基于HTML模板 order-history.html
 * 
 * @package WP Bootstrap Woo
 */

defined('ABSPATH') || exit;

$current_page = empty($current_page) ? 1 : absint($current_page);
$customer_orders = wc_get_orders(
    apply_filters(
        'woocommerce_my_account_my_orders_query',
        array(
            'customer' => get_current_user_id(),
            'page'     => $current_page,
            'paginate' => true,
        )
    )
);

?>

<!-- orders section start -->
<div class="orders-section">
    <div class="orders-header">
        <h3>Order History</h3>
        <p>Track and manage all your orders</p>
    </div>
    
    <!-- order filters -->
    <div class="order-filters">
        <div class="filter-buttons">
            <button class="filter-btn active" data-filter="all">All Orders</button>
            <button class="filter-btn" data-filter="completed">Completed</button>
            <button class="filter-btn" data-filter="processing">Processing</button>
            <button class="filter-btn" data-filter="pending">Pending</button>
            <button class="filter-btn" data-filter="cancelled">Cancelled</button>
        </div>
        <div class="search-orders">
            <div class="search-input-wrap">
                <input type="text" id="orderSearch" placeholder="Search orders..." class="search-input">
                <i class="feather-search search-icon"></i>
            </div>
        </div>
    </div>
    
    <?php if ($customer_orders->orders) : ?>
        
        <!-- orders table -->
        <div class="orders-table-wrap">
            <table class="orders-table">
                <thead>
                    <tr>
                        <th>Order</th>
                        <th>Date</th>
                        <th>Status</th>
                        <th>Items</th>
                        <th>Total</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($customer_orders->orders as $customer_order) : ?>
                        <?php
                        $order = wc_get_order($customer_order);
                        $item_count = $order->get_item_count() - $order->get_item_count_refunded();
                        ?>
                        <tr class="order-row" data-status="<?php echo esc_attr($order->get_status()); ?>">
                            <!-- order number -->
                            <td class="order-number">
                                <div class="order-info">
                                    <a href="<?php echo esc_url($order->get_view_order_url()); ?>" class="order-link">
                                        #<?php echo $order->get_order_number(); ?>
                                    </a>
                                    <span class="order-id"><?php echo $order->get_id(); ?></span>
                                </div>
                            </td>
                            
                            <!-- order date -->
                            <td class="order-date">
                                <div class="date-info">
                                    <span class="date"><?php echo esc_html(wc_format_datetime($order->get_date_created(), 'M d, Y')); ?></span>
                                    <span class="time"><?php echo esc_html(wc_format_datetime($order->get_date_created(), 'g:i A')); ?></span>
                                </div>
                            </td>
                            
                            <!-- order status -->
                            <td class="order-status">
                                <span class="status-badge status-<?php echo esc_attr($order->get_status()); ?>">
                                    <?php echo esc_html(wc_get_order_status_name($order->get_status())); ?>
                                </span>
                            </td>
                            
                            <!-- order items -->
                            <td class="order-items">
                                <div class="items-info">
                                    <span class="item-count"><?php echo esc_html($item_count); ?> items</span>
                                    <div class="item-preview">
                                        <?php
                                        $items = $order->get_items();
                                        $displayed = 0;
                                        foreach ($items as $item_id => $item) {
                                            if ($displayed >= 3) break;
                                            $product = $item->get_product();
                                            if ($product) {
                                                echo '<div class="item-thumb">';
                                                echo $product->get_image(array(30, 30));
                                                echo '</div>';
                                                $displayed++;
                                            }
                                        }
                                        if (count($items) > 3) {
                                            echo '<span class="more-items">+' . (count($items) - 3) . '</span>';
                                        }
                                        ?>
                                    </div>
                                </div>
                            </td>
                            
                            <!-- order total -->
                            <td class="order-total">
                                <div class="total-info">
                                    <span class="amount"><?php echo wp_kses_post($order->get_formatted_order_total()); ?></span>
                                    <?php if ($order->get_payment_method_title()) : ?>
                                        <span class="payment-method"><?php echo esc_html($order->get_payment_method_title()); ?></span>
                                    <?php endif; ?>
                                </div>
                            </td>
                            
                            <!-- order actions -->
                            <td class="order-actions">
                                <div class="action-buttons">
                                    <a href="<?php echo esc_url($order->get_view_order_url()); ?>" class="btn-action btn-view" title="View Order">
                                        <i class="feather-eye"></i>
                                        <span>View</span>
                                    </a>
                                    
                                    <?php if ($order->needs_payment()) : ?>
                                        <a href="<?php echo esc_url($order->get_checkout_payment_url()); ?>" class="btn-action btn-pay" title="Pay Now">
                                            <i class="feather-credit-card"></i>
                                            <span>Pay</span>
                                        </a>
                                    <?php endif; ?>
                                    
                                    <?php if (in_array($order->get_status(), apply_filters('woocommerce_valid_order_statuses_for_cancel', array('pending', 'failed'), $order), true)) : ?>
                                        <a href="<?php echo esc_url($order->get_cancel_order_url(wc_get_page_permalink('myaccount'))); ?>" class="btn-action btn-cancel" title="Cancel Order" onclick="return confirm('Are you sure you want to cancel this order?');">
                                            <i class="feather-x"></i>
                                            <span>Cancel</span>
                                        </a>
                                    <?php endif; ?>
                                    
                                    <!-- tracking button -->
                                    <?php if ($order->get_status() === 'processing' || $order->get_status() === 'completed') : ?>
                                        <button type="button" class="btn-action btn-track" title="Track Order" onclick="trackOrder('<?php echo $order->get_order_number(); ?>')">
                                            <i class="feather-truck"></i>
                                            <span>Track</span>
                                        </button>
                                    <?php endif; ?>
                                </div>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
        
        <!-- pagination -->
        <?php if (1 < $customer_orders->max_num_pages) : ?>
            <div class="orders-pagination">
                <?php
                echo paginate_links(
                    apply_filters(
                        'woocommerce_pagination_args',
                        array(
                            'base'      => esc_url_raw(str_replace(999999999, '%#%', remove_query_arg('add-to-cart', get_pagenum_link(999999999, false)))),
                            'format'    => '',
                            'add_args'  => false,
                            'current'   => max(1, get_query_var('paged')),
                            'total'     => $customer_orders->max_num_pages,
                            'prev_text' => '<i class="feather-chevron-left"></i>',
                            'next_text' => '<i class="feather-chevron-right"></i>',
                            'type'      => 'list',
                            'end_size'  => 3,
                            'mid_size'  => 3,
                        )
                    )
                );
                ?>
            </div>
        <?php endif; ?>
        
    <?php else : ?>
        
        <!-- no orders -->
        <div class="no-orders">
            <div class="no-orders-content">
                <div class="no-orders-icon">
                    <i class="feather-shopping-bag"></i>
                </div>
                <h4>No orders found</h4>
                <p>You haven't placed any orders yet. Start shopping to see your orders here.</p>
                <a href="<?php echo esc_url(wc_get_page_permalink('shop')); ?>" class="btn-start-shopping">
                    <i class="feather-shopping-cart"></i>
                    <span>Start Shopping</span>
                </a>
            </div>
        </div>
        
    <?php endif; ?>
</div>
<!-- orders section end -->

<style>
.orders-section {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.orders-header {
    margin-bottom: 30px;
}

.orders-header h3 {
    margin: 0 0 5px 0;
    color: #212529;
    font-weight: 600;
}

.orders-header p {
    margin: 0;
    color: #6c757d;
}

.order-filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 20px;
}

.filter-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 8px 16px;
    border: 2px solid #dee2e6;
    background: #fff;
    color: #495057;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 14px;
}

.filter-btn:hover,
.filter-btn.active {
    border-color: #007cba;
    background: #007cba;
    color: #fff;
}

.search-orders {
    min-width: 250px;
}

.search-input-wrap {
    position: relative;
}

.search-input {
    width: 100%;
    padding: 10px 15px 10px 40px;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    font-size: 14px;
}

.search-input:focus {
    outline: none;
    border-color: #007cba;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 16px;
}

.orders-table-wrap {
    overflow-x: auto;
    margin-bottom: 30px;
}

.orders-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.orders-table th {
    background: #f8f9fa;
    padding: 15px 12px;
    text-align: left;
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
}

.orders-table td {
    padding: 20px 12px;
    border-bottom: 1px solid #f1f3f4;
    vertical-align: middle;
}

.order-row:hover {
    background: #f8f9fa;
}

.order-info .order-link {
    font-weight: 600;
    color: #007cba;
    text-decoration: none;
    display: block;
    margin-bottom: 2px;
}

.order-info .order-id {
    font-size: 12px;
    color: #6c757d;
}

.date-info .date {
    display: block;
    font-weight: 500;
    color: #212529;
}

.date-info .time {
    font-size: 12px;
    color: #6c757d;
}

.status-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-completed { background: #d4edda; color: #155724; }
.status-processing { background: #fff3cd; color: #856404; }
.status-pending { background: #f8d7da; color: #721c24; }
.status-on-hold { background: #d1ecf1; color: #0c5460; }
.status-cancelled { background: #f5f5f5; color: #6c757d; }
.status-refunded { background: #e2e3e5; color: #383d41; }
.status-failed { background: #f8d7da; color: #721c24; }

.items-info .item-count {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: #212529;
}

.item-preview {
    display: flex;
    align-items: center;
    gap: 5px;
}

.item-thumb {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #dee2e6;
}

.item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.more-items {
    background: #f8f9fa;
    color: #6c757d;
    font-size: 11px;
    padding: 4px 6px;
    border-radius: 12px;
    font-weight: 500;
}

.total-info .amount {
    display: block;
    font-weight: 600;
    color: #212529;
    font-size: 16px;
}

.total-info .payment-method {
    font-size: 12px;
    color: #6c757d;
}

.action-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    background: #fff;
    color: #495057;
    text-decoration: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-action:hover {
    background: #f8f9fa;
    border-color: #adb5bd;
}

.btn-view:hover { border-color: #007cba; color: #007cba; }
.btn-pay:hover { border-color: #28a745; color: #28a745; }
.btn-cancel:hover { border-color: #dc3545; color: #dc3545; }
.btn-track:hover { border-color: #ffc107; color: #856404; }

.orders-pagination {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.orders-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 2px;
    border: 1px solid #dee2e6;
    background: #fff;
    color: #495057;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.orders-pagination .page-numbers:hover,
.orders-pagination .page-numbers.current {
    background: #007cba;
    color: #fff;
    border-color: #007cba;
}

.no-orders {
    text-align: center;
    padding: 80px 20px;
}

.no-orders-icon {
    font-size: 64px;
    color: #dee2e6;
    margin-bottom: 30px;
}

.no-orders h4 {
    margin-bottom: 15px;
    color: #495057;
}

.no-orders p {
    color: #6c757d;
    margin-bottom: 30px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.btn-start-shopping {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #007cba;
    color: #fff;
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease;
}

.btn-start-shopping:hover {
    background: #005a8b;
    color: #fff;
}

@media (max-width: 768px) {
    .orders-section {
        padding: 20px 15px;
    }
    
    .order-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-orders {
        min-width: auto;
    }
    
    .orders-table th,
    .orders-table td {
        padding: 10px 8px;
        font-size: 14px;
    }
    
    .action-buttons {
        flex-direction: column;
    }
    
    .btn-action span {
        display: none;
    }
    
    .btn-action {
        justify-content: center;
        padding: 8px;
        width: 40px;
        height: 40px;
    }
}
</style>

<script>
// Order filtering
document.addEventListener('DOMContentLoaded', function() {
    const filterButtons = document.querySelectorAll('.filter-btn');
    const orderRows = document.querySelectorAll('.order-row');
    const searchInput = document.getElementById('orderSearch');
    
    // Filter functionality
    filterButtons.forEach(button => {
        button.addEventListener('click', function() {
            filterButtons.forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
            
            const filter = this.getAttribute('data-filter');
            
            orderRows.forEach(row => {
                if (filter === 'all' || row.getAttribute('data-status') === filter) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        });
    });
    
    // Search functionality
    if (searchInput) {
        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            
            orderRows.forEach(row => {
                const orderNumber = row.querySelector('.order-link').textContent.toLowerCase();
                const orderDate = row.querySelector('.date').textContent.toLowerCase();
                const orderStatus = row.querySelector('.status-badge').textContent.toLowerCase();
                
                if (orderNumber.includes(searchTerm) || orderDate.includes(searchTerm) || orderStatus.includes(searchTerm)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        });
    }
});

// Track order function
function trackOrder(orderNumber) {
    alert('Tracking order: ' + orderNumber + '\n\nThis feature will show tracking information.');
    // Implement actual tracking functionality here
}
</script>